<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件中数据的存储</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- {{msg}} -->
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>

    <!-- template标签 -->
    <!-- 组件中自己如何存放数据 -->
    <template id="cpnT2">
        <div>
            <p>{{msg}}</p>
            <h2>当前计数：{{counter}}</h2>
            <button @click="increase">+</button>
            <button @click="decrease">-</button>
        </div>
    </template>

    <script>
        const obj = {//创建了一个对象， 赋予一个内存地址 Ox11
            name: "shane",
            age: 10
        }

        // es5
        function abc() {
            // return {//每一次创建一个新的对象，赋予一个新的内存地址
            //     name: "shane",
            //     age: 10
            // }
            return obj
        }

        let obj1 = abc()
        let obj2 = abc()
        let obj3 = abc()
        obj1.name = "kitty"
        console.log(obj2.name);



        // 1. 创建组件对象
        const cpn = {
            template: "#cpnT2",
            data() {
                return {
                    msg: "hello",
                    counter: 0
                }
            },
            methods: {
                increase() {
                    this.counter++
                },
                decrease() {
                    this.counter--
                }
            },
        }

        // 实例可以看作一个最大的组件也就是root组件
        let app = new Vue({
            el: "#app",
            data: {
                msg: "world",
            },
            components: {
                cpn: cpn
            }
        })
    </script>
</body>

</html>